<!DOCTYPE html>
<html>
<head>
  <title>Rayleigh: Search by multiple colors</title>
  <link href="/static/main.css" media="all" rel="stylesheet" type="text/css"/>
</head>
<body>
  <div id="content">
    <!-- The left sidebar: image and histogram display. -->
    <div id="search_sidebar">
      <img src="{{ image_url }}" />

      <form id="search_form" action='#'>
        <h3>Search Method</h3>
        {% for st in sic_types %}
          <input type="radio" name="sic_type" value="{{ st }}" {{ 'checked' if st == sic_type else '' }}>{{ st }}<br />
        {% endfor %}
        <input id="search_form_submit" type="submit" value="Search" />
      </form>
      
      <hr />
      <div id="histogram">
        <h3>Smoothed histogram</h3>
        <img width="240px" src="/image_histogram/{{ sic_type }}/0/{{ image_id }}.png" />
      </div>

      <div id="raw-histogram">
        <h3>Raw histogram</h3>
        <img width="240px" src="/image_histogram/{{ sic_type }}/1/{{ image_id }}.png" />
      </div>

      <div id="palette_image">
        <h3>Palette image</h3>
        <img width="240px" src="/palette_image/{{ sic_type }}/{{ image_id }}.png" />
      </div>

      <hr />
      Back to <a href='/search_by_palette'>search by pallete</a>.
    </div>

    <!-- Main area: returned images. -->
    <div id="images">
      <h3>Matching images</h3>
      <div id="results">
      </div>
    </div>
  </div>
  <script src="/static/jquery-1.8.3.js"></script>
  <script src="/static/sprintf-0.7-beta1.js"></script>
  <script>
    $(document).ready(function() {
      /* Prepare the color palette search form. */
      var sic_type = "{{ sic_type }}";
      var image_id = "{{ image_id }}";

      $('#search_form').submit(function() {
        var sic_type = $("#search_form input[name='sic_type']:checked").val();
        var search_url = sprintf('/search_by_image/%s/%s',
          sic_type, image_id);
        window.location = search_url;
        return false;
      });

      /* Make the request for the palette query histogram and image results. */
      var display_results = function(json_data) {
        {% include 'display_images.js' %}
      }
      var search_url = sprintf(
        '/search_by_image_json/%s/%s', sic_type, image_id);
      $.getJSON(search_url, success=display_results);
    });
  </script>
</body>
</html>
